<template>
  <div class="enterpriseInfo">
    <div>
      <div class="title">
        <h1 style="color: #337ECC;font-size: 40px">举报-反馈-信息</h1>
        <div>
          <CopyOutlined class="icon"/>
          <FileSearchOutlined class="icon"/>
        </div>

      </div>
    </div>
    <div style="border: 2px solid #337ECC; padding: 20px;border-top: 30px solid #337ECC; border-radius: 10px">
      <div style="margin: -24px -24px 10px;">
        <a-page-header
            title="审核任务"
        >
          <template #extra>
            <a-button key="1" type="primary" @click="auditYes">通过</a-button>
            <a-button danger type="primary" @click="showModal">拒绝</a-button>
          </template>
          <a-descriptions :column="3" size="small">
            <a-descriptions-item label="">审核如下举报信息的真伪</a-descriptions-item>
          </a-descriptions>
        </a-page-header>
      </div>

      <div>

        <a-modal v-model:open="open" cancel-text="取消" ok-text="确认" title="审核不通过" @ok="handleOk">
          <a-form-item ref="reportCheckRemark" label="原因" name="reportCheckRemark">
            <a-textarea v-model:value="formState.reportCheckRemark"
                        :auto-size="{minRows: 3, maxRows: 20}"
                        show-count
                        style="width: 400px"
            />
          </a-form-item>
        </a-modal>

      </div>

      <div style="display: flex;  justify-content: space-between;">
        <div>
          <a-descriptions :column="2" title="基本信息">
            <a-descriptions-item label="举报者姓名">{{ formState.reportPersonName }}</a-descriptions-item>
            <a-descriptions-item label="举报状态">{{ formState.reportStatus }}</a-descriptions-item>
            <a-descriptions-item label="举报者账号">{{ formState.reportPersonAccount }}</a-descriptions-item>
            <a-descriptions-item label="举报者联系方式">{{ formState.reportPersonContact }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div>
        <a-descriptions :column="2" title="举报描述">
          <a-descriptions-item>
            <span v-html="truncateText(formState.reportDescribe)"></span>
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions :column="2" title="佐证信息">
          <a-descriptions-item label="举报-图片">
            <div v-for="item in formState.imageList" :key="item">
              <a-image
                  :height="170"
                  :src="'http://localhost:8080/image/download?name=' + item.imageUrl"
                  :width="170"
                  style="border: 2px solid red;"
              />
            </div>

          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </div>
</template>
<script setup>


import {computed, onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {CopyOutlined, FileSearchOutlined} from "@ant-design/icons-vue";
import {queryReportByReportIdAPI, queryReportImageAPI, updateReportAPI} from "@/apis/report.js";
import {message} from "ant-design-vue";

// 新增方法用于将回车替换微br空格替换微&nbsp
const truncateText = (text) => {
  return text.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
};

const router = useRouter();
//审核传递的参数
const data = ref({reportId: '',reportStatus:'', reportCheckStatus: '', reportCheckRemark: ''})
//审核通过
const auditYes = async () => {
  data.reportCheckStatus = "审核通过"
  data.reportStatus = "举报已成立"
  data.reportId = reportId.value
  const res = await updateReportAPI(data);
  if (res.data.flag) {
    success("审核成功");
    // 设置一个定时器，在1秒后刷新页面
    setTimeout(() => {
      router.go(-1); // -1 表示返回上一个页面
    }, 1000); // 1000毫秒 = 1秒
  } else {
    console.log('error submit!', toRaw(formState));
  }
};
//审核不通过
const auditNo = async () => {
  data.reportCheckStatus = "审核不通过"
  data.reportId = reportId.value
  data.reportStatus="举报已审核"
  data.reportCheckRemark = formState.reportCheckRemark
  const res = await updateReportAPI(data);
  if (res.data.flag) {
    success("审核成功");
    // 设置一个定时器，在1秒后刷新页面
    setTimeout(() => {
      router.go(-1); // -1 表示返回上一个页面
    }, 1000); // 1000毫秒 = 1秒
  } else {
    console.log('error submit!', toRaw(formState));
  }
};
//拒绝通知框
const open = ref(false);
const showModal = () => {
  open.value = true;
};
const handleOk = e => {
  console.log(e);
  auditNo(); // 调用 auditNo 方法
  open.value = false;
};


const route = useRoute()
//定义数据
const formState = reactive({
  reportId: '',
  reportPersonName: '',
  reportPersonAccount: '',
  reportStatus: '',
  reportCheckStatus: '',
  reportPersonContact: '',
  reportDescribe: '',
  reportCheckRemark:'',
  imageList: [],
});

//获取数据
const getData = async (reportId) => {
  const res = await queryReportByReportIdAPI(reportId)
  formState.reportId = res.data.data.reportId;
  formState.reportPersonName = res.data.data.reportPersonName;
  formState.reportPersonAccount = res.data.data.reportPersonAccount;
  formState.reportCheckStatus = res.data.data.reportCheckStatus;
  formState.reportStatus = res.data.data.reportStatus;
  formState.reportDescribe = res.data.data.reportDescribe;
  formState.reportPersonContact = res.data.data.reportPersonContact;

  const res2 = await queryReportImageAPI(res.data.data.reportId)
  formState.imageList = res2.data.data;
  console.log(formState.imageList[0].imageUrl)

}

//时间格式处理
const formattedFoundationDate = computed(() => {
  const date = new Date(formState.enterpriseFoundationDate);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
  const day = String(date.getDate()).padStart(2, '0');
  // const hours = String(date.getHours()).padStart(2, '0');
  // const minutes = String(date.getMinutes()).padStart(2, '0');
  // const seconds = String(date.getSeconds()).padStart(2, '0');
  // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return `${year}-${month}-${day}`;
});


//接收路由参数
const reportId = ref();
// 生命周期
onMounted(() => {
  reportId.value = route.params.reportId;
  getData(reportId.value)
});
const success = (msg) => {
  message.success(msg);
};
</script>
<style scoped>
.enterpriseInfo {
  margin: 5px;
  padding: 20px 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px; /* 你可以调整这个值来改变圆角的大小 */

  .title {
    display: flex;
    justify-content: space-between;

    .icon {
      font-size: 35px;
      padding: 15px;
      color: white;
      margin-right: 20px;
      background-color: #C09E66;
      border-radius: 50px;
      margin-bottom: 10px;
    }
  }
}
</style>